<!--
 * @Descripttion: 
 * @version: 
 * @Author: mmzhang
 * @Date: 2021-06-30 15:24:21
 * @LastEditTime: 2021-10-18 14:30:35
-->
<template>
  <div>
    <Collapse v-model="panelChoose">
      <Panel name="1">
        {{ panelList.productName }}
        <div slot="content">
          <div class="proBox" :class="[
              { checked: checkProduct == item.buildingId },
              { hui: !item.unitCount && checkProduct != item.buildingId },
            ]" v-for="item in panelList.buildingDTOS" :key="item.buildingId" @click="
              (e) => {
                if (item.unitCount) {
                  filterProduct(item.buildingId);
                } else {
                  e.preventDefault();
                }
              }
            ">
            <div class="pro" :class="[{ notClick: !item.unitCount }]">
              <p class="p1">{{ item.buildingName }}</p>
              <p class="p2">
                <span>{{
                  buildingTypeSwitch(productTypeSmall, item.buildingType)
                }}</span><span>{{ item.unitCount }}个单元</span>
              </p>
            </div>
          </div>
        </div>
      </Panel>
    </Collapse>
  </div>
</template>
<script>
  import roomMgr from '@/biz/building/room'
  export default {
    name: 'panel',
    props: ['productId', 'buildingId', 'productTypeSmall'],
    data() {
      return {
        panelChoose: '1',
        panelList: [],
        checkProduct: {},
      }
    },
    components: {},
    watch: {
      productId(newVal, oldVal) {
        console.log(this.productId, '我是侧边的产品id')
        this.productId = newVal
      },
      buildingId(newVal, oldVal) {
        this.buildingId = newVal
      },
      buildiproductTypeSmallngId(newVal, oldVal) {
        this.productTypeSmall = newVal
      },
    },
    mounted() {
      this.getPlateTreeData()
    },
    methods: {
      //建筑类型映射
      buildingTypeSwitch(productType, buildingTypes) {
        if (!buildingTypes) return '-'
        console.log(buildingTypes, 'buildingTypes')
        buildingTypes = buildingTypes.split(',')
        let newArr = [],
          arrTmp = []
        let arr = JSON.parse(this.$tool.getStorage('dictionaryData')).productType
        for (let i = 0; i < arr.length; i++) {
          arrTmp = arrTmp.concat(arr[i].children)

          // if (String(productType) === String(arr[i].key)) {
          //   arr[i].children.map((item) => {
          //     buildingTypes.map((itemL) => {
          //       if (itemL == item.key) {
          //         newArr.push(item.value)
          //       }
          //     })
          //     // console.log(newArr)
          //   })
          // }
        }
        arrTmp.map((itemL) => {
          if (itemL.key == buildingTypes) {
            newArr.push(itemL.value)
          }
        })
        return newArr.join('、')
      },
      // 获取指定产品所有楼栋,单元
      getPlateTreeData() {
        let params = {
          productId: this.productId, //产品id
        }
        roomMgr
          .buildingDongList(params)
          .then((res) => {
            console.log(res, '楼栋列表楼栋列表楼栋列表楼栋列表楼栋列表楼栋列表')
            this.panelList = res
            this.checkProduct = this.buildingId ?
              this.buildingId :
              res.buildingDTOS[0].buildingId

            let buildInfo = this.panelList.buildingDTOS.find((item) => {
              return item.buildingId == this.checkProduct
            })

            console.log(this.checkProduct, buildInfo, 'this.checkProduct')
            this.$emit('onSearch', buildInfo)
            console.log(this.panelList, '产品下的楼栋列表')
          })
          .catch((res) => this.$Message.error(res))
      },
      // 过滤产品下房源
      filterProduct(id) {
        console.log('过滤产品下房源')

        let buildInfo = this.panelList.buildingDTOS.find((item) => {
          return item.buildingId == id
        })
        console.log(buildInfo, 'buildInfo')

        this.$emit('onSearch', buildInfo)
        this.checkProduct = id
      },
    },
  }
</script>
<style lang='scss' scoped>
  .proBox {
    border-bottom: 1px solid #e8eaec;
    padding: 5px 0;
    cursor: pointer;

    .pro {
      padding: 5px 10px;

      p.p1 {
        margin-bottom: 10px;
      }

      p.p2 {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
      }
    }
  }

  .checked {
    background: skyblue;
    color: #fff;
  }

  .hui {
    background: #f8f8f9;
    cursor: not-allowed !important;
    opacity: 0.8;
  }

  .notClick {
    pointer-events: none;
  }

  ::v-deep .ivu-collapse-header {
    overflow: hidden;
  }
</style>